JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

来源:网络整理作者:wy 发布时间:2020-12-23 12:05

jquery中文网为您提供JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2等资源，欢迎您收藏本站，我们将为您提供最新...

技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战—-JavaScript、jquery、HTML5、Node.js实例大全】
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

3.2 照片加载与定位

根据功能设计，可以先写好 HTML 结构基础，再配好 CSS 做出大致效果，最后用 JavaScript加上各种动作。首先请看 HTML 代码结构。

3.2.1 HTML 代码

CSS代码保存到 eg3.css 文件中，JavaScript代码保存到 eg3.js 文件中，这样让 HTML代码更加干净。详见【范例 3-1】。

【范例 3-1 照片展示的 HTML 代码】

<!DOCTYPE html> <html> <head> <title>照片展示</title> <link href="http://www.dismall.com/thread-957-1-1.html/a_16676/eg3.css" type="text/css" /> </head> <body> <div><img src="http://www.dismall.com/thread-957-1-1.html/a_16676/photo01.jpg" alt=""></div> <div> <span></span> <ul> </ul> <span></span> </div> <script src="http://www.dismall.com/thread-957-1-1.html/a_16676/eg3.js"></script> </body> </html>

对比前面章节的范例看上去更加简洁了对吧！重构的目的就是在于这样的效果，这可以说是开发人员的用户体验。

3.2.2 CSS 代码

直接预览【范例 3-1】时肯定是乱七八糟的，在 eg3.css 中写好布局和定位的代码之后效果就大不一样了，见图 3-2，CSS 代码见【范例 3-2】。

【范例 3-2 照片展示的 CSS 代码】

1. ul,li{ 2. list-style: none; 3. } 4. #smallPhotos{width:620px; margin: 10px 0;} 5. #smallPhotosList{ margin: 0 auto; width:580px; float:left;padding: 0;} 6. #smallPhotosList li{ 7. float:left; /IT之家左浮动IT之家/ 8. margin-left: 10px; /IT之家左外边距 10 像素IT之家/ 9. _margin-left:8px; /IT之家这是专门正对 IE6 间隙太大而设置的IT之家/ 10． } 11. #smallPhotosList img{ 12. border:2px solid #000; 13. cursor:pointer; /IT之家鼠标样式IT之家/ 14. } 15. #prve{ 16. background: url(icon_prve.jpg); 17. height: 40px; 18. width:20px; 19. display: inline-block; /IT之家让 span 标签变成块级元素IT之家/ 20. float: left; 21. cursor:pointer; 22. } 23. #next{ 24. background: url(icon_next.jpg); 25. height:40px; 26. width:20px; 27. display: inline-block; 28. float: right; 29. cursor:pointer; 30． }

这些 CSS 再加上后面【范例 3-3】的 JavaScript 代码，效果就大不一样了，请看图 3-2 的加载CSS 前后对比。

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

图 3-2 加载 CSS 代码前后
在【范例 3-2】中有一个称呼是 CSS hack，这个针对不同的浏览器写不同的 CSS code 的过程，就叫 CSS hack。CSS hack 的存在是不同的浏览器，比如 IE 6、IE 7 等，对 CSS 的解析认识不一样，会导致页面效果不同，得不到我们所需要的页面效果。这个时候需要针对不同的浏览器去写不同的 CSS code，让它能够同时兼容不同的浏览器。
CSS Hack 大致有 3 种表现形式，CSS 类内部 Hack、选择器 Hack 以及 HTML 头部引用(if
IE)Hack，CSS Hack 主要针对 IE 浏览器，有一个比较全的 CSS Hack 表，请见图 3-3，转载暂时省略！

最具士兵突击实战类型的JavaScript

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2